//@ts-nocheck
import React, { useState, useEffect, useRef } from 'react'
import { Tooltip } from 'antd'
import './index.less'

const TooltipItem = ({ highValue, lowValue, highTitle, lowTitle, color, unit }) => {
  return (
    <div className="interval-bar-charttooltip-wrapper">
      <div className="interval-bar-charttooltip-item">
        <span className="block" style={{ backgroundColor: `${color[0].color}` }} />
        <span className="text">
          {highTitle}：{highValue}
          {unit}
        </span>
      </div>
      <div className="interval-bar-charttooltip-item bottom">
        <span className="block" style={{ backgroundColor: `${color[1].color}` }} />
        <span className="text">
          {lowTitle}：{lowValue}
          {unit}
        </span>
      </div>
    </div>
  )
}

const IntervalBarChart = ({ unit = '', data, legend, scaleNum = 10 }) => {
  const [listData, setListData] = useState([])
  const [scaleArray, setScaleArray] = useState([])
  const crosswiseDiagramRef = useRef(null)
  const [clientHeight, setClientHeight] = useState(0)

  useEffect(() => {
    if (scaleNum <= 0) {
      return
    }
    let maxValue = 0
    data.forEach((dataItem) => {
      if (dataItem.highValue > maxValue) maxValue = dataItem.highValue
    })
    data.forEach((dataItem) => {
      if (dataItem.lowValue > maxValue) maxValue = dataItem.lowValue
    })
    let fValue = maxValue % (5 * scaleNum)
    if (fValue !== 0) {
      maxValue = maxValue + (5 * scaleNum - fValue)
    }
    if (maxValue < 5 * scaleNum) maxValue = 5 * scaleNum

    setListData(
      data.map((dataItem) => {
        return {
          ...dataItem,
          title: dataItem.title,
          percent: (Math.abs(dataItem.highValue - dataItem.lowValue) / maxValue) * 100,
          bottomDistance:
            ((dataItem.lowValue > dataItem.highValue ? dataItem.highValue : dataItem.lowValue) /
              maxValue) *
            100,
          isNeedPerversion: dataItem.highValue - dataItem.lowValue < 0,
          lowValuePrecent: (dataItem.lowValue / maxValue) * 100,
          highValuePrecent: (dataItem.highValue / maxValue) * 100,
        }
      })
    )

    const newArray = new Array()
    const maxScaleNum = maxValue / scaleNum
    for (let i = 0; i <= scaleNum; i += 1) {
      newArray.push(i * maxScaleNum)
    }
    setScaleArray(newArray.reverse())
  }, [data, scaleNum])

  useEffect(() => {
    setClientHeight(crosswiseDiagramRef.current.clientHeight)
  }, [])

  return (
    <div className="interval-bar-chart">
      <section className="crosswise_diagram" ref={crosswiseDiagramRef}>
        <div className="crosswise_diagram_top">
          {listData?.map((item, index) => {
            return (
              <div className="crosswise_diagram_item" key={index}>
                <div className="crosswise_diagram_item_precent">
                  <div
                    className="precent-wrapper"
                    style={{
                      width: 16,
                      height: `${item.percent}%`,
                      bottom: `${item.bottomDistance}%`
                    }}
                  >
                    <Tooltip
                      overlayClassName="interval-bar-chart-tooltip"
                      arrowPointAtCenter
                      color="#ffffff"
                      placement="right"
                      title={
                        <TooltipItem
                          color={legend}
                          highValue={item.highValuePrecent}
                          lowValue={item.lowValuePrecent}
                          highTitle={legend[0].title}
                          lowTitle={legend[1].title}
                          unit={unit}
                        />
                      }
                    >
                      <span
                        className="top-box"
                        style={{
                          backgroundColor: item.isNeedPerversion ? `${legend[1].color}` : `${legend[0].color}`
                        }}
                      />
                    </Tooltip>
                    <div
                      className="precent"
                      style={{
                        width: 16,
                        height: `100%`,
                        backgroundColor: item.isNeedPerversion ? `${legend[1].color}` : `${legend[0].color}`
                      }}
                    />
                    <Tooltip
                      overlayClassName="interval-bar-chart-tooltip"
                      arrowPointAtCenter
                      color="#ffffff"
                      title={
                        <TooltipItem
                          color={legend}
                          highValue={item.highValuePrecent}
                          lowValue={item.lowValuePrecent}
                          highTitle={legend[0].title}
                          lowTitle={legend[1].title}
                          unit={unit}
                        />
                      }
                      placement="right"
                    >
                      <span
                        className="bottom-box"
                        style={{
                          backgroundColor: item.isNeedPerversion ? `${legend[0].color}` : `${legend[1].color}`
                        }}
                      />
                    </Tooltip>
                  </div>
                </div>
                <div className="crosswise_diagram_item_name" style={{ top: clientHeight + 8 }}>
                  {item.title}
                </div>
              </div>
            )
          })}
        </div>
        <div className="crosswise_diagram_bottom">
          <ul className="crosswise_diagram_ul">
            {scaleArray.map((item, itemIndex) => {
              return (
                <li
                  className="crosswise_diagram_li"
                  style={{ top: `${(100 / scaleNum) * itemIndex}%` }}
                  key={item}
                >
                  <span className="crosswise_diagram_name">
                    {unit ? `${100 - (100 / scaleNum) * itemIndex}%` : item}
                  </span>
                  <span
                    className="crosswise_diagram_precent"
                    style={{
                      borderTop: itemIndex === scaleArray.length - 1 ? '1px solid #DCE0E6' : ''
                    }}
                  />
                </li>
              )
            })}
          </ul>
        </div>
      </section>
      <div className="legend">
        {legend.map((item, index) => {
          return (
            <div className="legend-item" key={index}>
              <span className="block" style={{ backgroundColor: `${item.color}` }} />
              <span className="text">{item.title}</span>
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default IntervalBarChart
